//定于全局变量 num  are
let num = 1;
let are = 1;

//封装函数 店铺
function ShopId() {
  $.get("http://chst.vip:1234/api/getgsshop", {}, (res) => {
    let html = "";
    $(res.result).each(function (i, item) {
      html += `
        <div shopid=${item.shopId}  >
  
              ${item.shopName}
  
              </div>
  
          `;
    });

    $(".contentbottom1").html(html);
    $(".contentbottom1").hide();

    //（店铺）将.contenttop 的内容  用  contentbottom1的第一个内容替代 （内容区有换行 正则过滤）
    let Allli = document.querySelectorAll(".contenttop li");
    Allli[0].innerText = $(".contentbottom1 div")[0].innerText.replace(
      /[\r\n]/g,
      ""
    );
  });
}
//（店铺）调用
ShopId();
//contenttop  里面的标签添加事件  contentbottom1 显示隐藏（店铺）
$(".contenttop li:eq(0)").click(function () {
  $(".contentbottom1").toggle(300);
});
//（店铺） .contentbottom1 里面的元素添加事件 点击  .contenttop li 更换对应的内容
$(".contentbottom1 ").on("click", "div", function () {
  let Allli = document.querySelectorAll(".contenttop li");
  Allli[0].innerText = $(this)
    .text()
    .replace(/[\r\n]/g, "");
  let NNum = Number($(this).attr("shopid"));
  XuanRan(NNum, are);
  num = NNum;
});

//////////////////////////////////////////////////////////////////////////////////////
//封装函数 区域
function AreaId() {
  $.get(
    "http://chst.vip:1234/api/getgsshoparea",
    {},
    (res) => {
      let html = "";
      $(res.result).each(function (i, item) {
        html += `
        <div areaid=   ${item.areaId}>
  
              ${item.areaName}
  
              </div>
  
          `;
      });
      $(".contentbottom2").html(html);
      $(".contentbottom2").hide();
      // （地区）将.contenttop 的内容  用  contentbottom1的第一个内容替代 （内容区有换行 正则过滤）
      let Allli = document.querySelectorAll(".contenttop li");
      Allli[1].innerText = $(".contentbottom2 div")[1].innerText.replace(
        /[\r\n]/g,
        ""
      );
    },
    "json"
  );
}

//（地区）调用
AreaId();

//contenttop  里面的标签添加事件  contentbottom2 显示隐藏（地区）
$(".contenttop li:eq(1)").click(function () {
  $(".contentbottom2").toggle(300);
});
//（地区） .contentbottom2 里面的元素添加事件 点击  .contenttop li 更换对应的内容
$(".contentbottom2 ").on("click", "div", function () {
  let Allli = document.querySelectorAll(".contenttop li");
  Allli[1].innerText = $(this)
    .text()
    .replace(/[\r\n]/g, "");

  let Aare = Number($(this).attr("areaid"));
  XuanRan(num, Aare);
  are = Aare;
});

// 渲染产品列表页面

//封装渲染函数

function XuanRan(NUM, ARE) {
  $.get(
    "http://chst.vip:1234/api/getgsproduct",
    {
      shopid: NUM,
      areaid: ARE,
    },
    (res) => {
      let html = "";
      $(res.result).each((i, item) => {
        // console.log(item.productImg);
        // let newimg = decodeURI(item.productImg);
        // console.log(newimg);
        // console.log(item);
        html += `
        <li>
      <img src='${item.productImg}'>
      <span>${item.productName}</span>
      <span>${item.productPrice}</span>
      </li>
      `;
      });
      $(".contentfoot").html(html);
    },
    "json"
  );
}
//封装渲染函数自调用  第一次传的1
XuanRan(num, are);
